<template>
  <div class="material-list">
    <unify-header></unify-header>
    <div class="container" ref="container">
      <div class="wrapper">
        <div class="main">
          <h2 class="title">我的素材</h2>
          <div class="operation">
            <div class="manager">
              <a href="javascript:void(0);" v-show="!managerIng" @click="managerIng=true" class="manager-btn">管理</a>
              <a href="javascript:void(0);" v-show="managerIng" @click="checkedAll" class="manager-btn">全选</a>
              <a href="javascript:void(0);" v-show="managerIng" @click="showDeleteDialogVisible"
                 class="manager-btn">删除</a>
              <a href="javascript:void(0);" v-show="managerIng" @click="managerIng=false" class="manager-btn">取消</a>
            </div>
          </div>
          <div class="works-list">
            <div class="works-container">
              <div class="woks-data" v-for="(material,index) in materialData" :key="material.id">
                <div class="img-box">
                  <el-checkbox v-show="managerIng" v-model="material.checked" class="checkbox-material"></el-checkbox>
                  <img :src="material.thumbnailUrl" @click="showOrSelect(material,index)">
                </div>
                <span class="time">{{material.uploadDt}}</span>
              </div>
            </div>
          </div>
          <el-pagination
            v-show="total>pageSize"
            small
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            @current-change="paging">
          </el-pagination>
        </div>
        <left-menu selected="material"></left-menu>
      </div>
    </div>
    <unify-footer></unify-footer>
    <el-dialog @open="showPreviewDialog"
               class="preview-dialog" title="我的素材" :visible.sync="previewDialogVisible" width="30%">
      <el-carousel ref="carousel" :autoplay="false" indicator-position="none" @change="changeCarousel">
        <el-carousel-item v-for="material in materialData" :key="material.id">
          <div class="preview-item" :style="{'background-image':'url('+material.thumbnailUrl+')'}"></div>
        </el-carousel-item>
      </el-carousel>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" class="delete-btn" @click="previewDelete">删除</el-button>
        <el-button @click="previewDialogVisible=false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import UnifyHeader from 'components/header/header'
  import UnifyFooter from 'components/footer/footer'
  import LeftMenu from 'components/center/menu'
  import {ALERT_CUSTOM} from 'base/js/common.config'
  import Api from '@/api.js'
  import * as MaterialAPi from '@/api/material'

  export default {
    data: function () {
      return {
        userDbId: null,
        checkedAllValue: false,
        managerIng: false,
        pageSize: 9,
        total: 0,
        pageNum: 1,
        materialData: [],
        previewIndex: 0,
        previewDialogVisible: false
      }
    },
    methods: {
      showOrSelect: function (material, index) {
        if (this.managerIng) {
          material.checked = !material.checked
        } else {
          this.previewIndex = index
          this.previewDialogVisible = true
        }
      },
      /**
       * tips:在获取element ui的dialog中嵌套的组建时，
       * 存在组件被初始化的顺序问题，不能直接通过this.$refs.carousel获取
       * 需要监听el-dialog的open事件（showPreviewDialog），因open事件在初始化carousel之前
       * 还需等待浏览器下一次刷新后调用carousel的方法
       * @author wangyanmin
       */
      showPreviewDialog: function () {
        let _self = this
        setTimeout(() => {
          _self.$refs.carousel.setActiveItem(_self.previewIndex)
        }, 20)
      },
      changeCarousel: function (index) {
        this.previewIndex = index
      },
      previewDelete: function () {
        this.materialData.forEach(item => {
          item.checked = false
        })
        this.materialData[this.previewIndex].checked = true
        this.showDeleteDialogVisible()
      },
      deleteWorkList: function () {
        let deleteArr = []
        this.materialData.forEach(function (item) {
          if (item.checked) {
            deleteArr.push(item)
          }
        })
        return deleteArr
      },
      deleteMaterial: function () {
        let deleteArr = this.deleteWorkList()
        let ids = []
        deleteArr.forEach((item) => {
          ids.push(item.dbId)
        })
        MaterialAPi.batchDeleteMaterial(this.userDbId, {
          ids: ids.join(',')
        }).then((res) => {
          if (!res) {
            return
          }
          if (res.status === 1) {
            this.managerIng = false
            this.checkedAllValue = false
            this.getData()
          } else {
            this.$alert(res.message, '提示', ALERT_CUSTOM)
            return
          }
        })
      },
      showDeleteDialogVisible: function () {
        if (!this.deleteWorkList().length) {
          this.$alert('请选择需要删除的素材！', '提示', ALERT_CUSTOM)
          return
        }
        this.$confirm('如果图片已被使用，删除后会导致图片无法印刷，请谨慎操作!', '提示', ALERT_CUSTOM).then(() => {
          this.deleteMaterial()
        }).catch(() => {
          this.$message({
            type: 'info',
            iconClass: "atrup_Message",
            message: '已取消删除'
          })
        })
      },
      getData: function () {
        this.pageNum -= 1
        Api.Material.MaterialData({
          sort: 'uploadDt',
          order: 'desc',
          status: 1,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }).then((result) => {
          return result.status === 200 ? result.request.response : ''
        }).then((result) => {
          let data = result ? JSON.parse(result) : ''
          if (!data) {
            return
          }
          let list = []
          data.results.forEach((item) => {
            item.checked = false
            list.push(item)
          })
          this.materialData = list
          this.total = data.totalRecord
        })
      },
      checkedAll: function () {
        this.checkedAllValue = !this.checkedAllValue
        for (let i = 0; i < this.materialData.length; i++) {
          this.materialData[i]['checked'] = this.checkedAllValue
        }
      },
      paging: function (val) {
        this.pageNum = val
        this.getData()
      }
    },
    components: {
      UnifyHeader,
      UnifyFooter,
      LeftMenu
    },
    watch: {},
    mounted: function () {
      this.setMinHeight(this.$refs.container, document.documentElement.clientHeight - 66 - 468)
    },
    created: function () {
      this.userDbId = localStorage.userDbId
      this.getData()
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">

  .material-list {
    .wrapper {
      width: 1152px;
      margin: 0 auto;
      overflow: hidden;
    }
    .container {
      padding: 14px 0 92px;
      background: #f1f1f1;
    }
    .main {
      position: relative;
      padding-bottom: 40px;
      width: 960px;
      min-height: 666px;
      float: right;
      border-radius: 5px;
      border: 1px solid #dedede;
      background: #fff;
      h2.title {
        padding-left: 30px;
        font-size: 16px;
        line-height: 55px;
        border-bottom: 1px solid #DEDEDE;
      }
      .operation {
        position: relative;
      }
      .manager {
        float: right;
        margin-right: 20px;
        line-height: 76px;
        a {
          margin-left: 20px;
          color: #A00912;
          font-size: 16px;
          font-weight: 400;
          outline: 0;
          &:hover {
            color: #a9372d;
          }
        }
      }
      .works-list {
        width: 892px;
        padding: 0 34px;
        overflow: hidden;
        .works-container {
          width: 948px;
          overflow: hidden;
        }
      }
      .woks-data {
        position: relative;
        float: left;
        width: 260px;
        margin-right: 56px;
        overflow: hidden;
        .img-box {
          display: table-cell;
          vertical-align: middle;
          width: 258px;
          height: 195px;
          border: 1px solid #dedede;
          border-radius: 5px;
          overflow: hidden;
          background: rgba(229, 229, 229, .5);
          .checkbox-material {
            position: absolute;
            top: 4px;
            right: 8px;
          }
        }
        img {
          display: block;
          max-height: 100%;
          max-width: 100%;
          margin: 0 auto;
          transition: all ease-out 0.5s;
          &:hover {
            cursor: pointer;
            transform: scale(1.2);
          }
        }
        .time {
          display: block;
          margin: 10px 0 28px;
          color: #cbcbcb;
          font-size: 12px;
        }
      }
    }
    .el-pagination {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      text-align: center;
      button:hover {
        color: #a00912;
      }
      .el-pager li:hover {
        color: #a00912;
      }
      .number {
        padding: 0 15px;
        font-size: 14px;
      }
      .number.active {
        border-color: #fff;
        background-color: #fff;
        color: #a00912;
      }
    }
    .preview-dialog {
      .dialog-footer {
        text-align: center;
      }
      .preview-item {
        height: 300px;
        background-color: #eee;
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center;
      }
    }
  }
</style>
